

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>控制台</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="{{URL::asset('layui/css/layui.css')}}" media="all">
    <link rel="stylesheet" href="{{URL::asset('css/admin.css')}}" media="all">
</head>
<body>
<fieldset class="layui-elem-field" style="margin-top: 20px;">
    <legend>搜索查询</legend>
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">开始时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="start_date" id="date1" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">结束日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="end_date" id="date2" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <button class="layui-btn" lay-submit="" lay-filter="demo1">搜索</button>
                </div>
            </div>
        </div>
    </form>
</fieldset>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">商品规格销量排行表</div>
                        <div class="layui-card-body">
                            <div id="main" style="width: 100%;height:400px;"></div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">商品颜色销量排行</div>
                        <div class="layui-card-body">
                            <div id="color_main" style="width: 100%;height:400px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="{{URL::asset('layui/layui.js')}}"></script>
<script>
    layui.config({
        base: '../' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'console']);
</script>
</body>
<script src="{{URL::asset('js/echarts.js')}}"></script>
<script src="{{URL::asset('js/jquery-3.1.1.min.js')}}"></script>
<script>
layui.use(['form','laydate'],function () {
    var form = layui.form,
    laydate = layui.laydate;


    //日期
    laydate.render({
        elem: '#date1'
    });
    laydate.render({
        elem: '#date2'
    });

    var id = "{{$id}}";

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var goodsSkuName = [];
    var goodsSkuSell = [];
    var goodsColorName = [];
    var goodsColorSell = [];
    $.ajax({
        url:'/admin/goods/by/date/api'
        ,type:'post'
        ,data:{"goods_id":id}
        ,async:false
        ,dataType:'json'
        ,success:function (d) {
            $.each(d.data.sku,function (i,v) {
                goodsSkuName.push(v.sku_name);
                goodsSkuSell.push(v.sell_num);
            });
            $.each(d.data.color,function (i,v) {
                goodsColorName.push(v.color_name);
                goodsColorSell.push(v.sell_num);
            });
        }
    });

    //监听提交
    form.on('submit(demo1)', function(data){
        var param = data.field;
        $.ajax({
            url:'/admin/goods/by/date/api'
            ,type:'post'
            ,data:{"goods_id":id,"start_date":param.start_date,"end_date":param.end_date}
            ,async:false
            ,dataType:'json'
            ,success:function (d) {
                goodsColorSell.length = 0;
                goodsColorName.length = 0;
                goodsSkuSell.length=0;
                goodsSkuName.length=0;
                $.each(d.data.sku,function (i,v) {
                    goodsSkuName.push(v.sku_name);
                    goodsSkuSell.push(v.sell_num);
                });
                $.each(d.data.color,function (i,v) {
                    goodsColorName.push(v.color_name);
                    goodsColorSell.push(v.sell_num);
                });
                myChart.clear();
                myChart1.clear();
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option,true);
                // 使用刚指定的配置项和数据显示图表。
                myChart1.setOption(option1,true);
            }
        });
        return false;
    });


    // 指定图表的配置项和数据
    var option = {
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            axisLabel: {
                interval: 0,
                textStyle: {
                    color: '#00c5d7'
                },
                formatter: function (value) {
                    // console.log(value);
                    var valueDetal = value.split("-").join("");
                    var ret = ""; //拼接加\n返回的类目项
                    var maxLength = 4; //每项显示文字个数
                    var valLength = valueDetal.length; //X轴类目项的文字个数
                    // console.log(valLength);
                    var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                    if (rowN > 1) { //如果类目项的文字大于3,
                        for (var i = 0; i < rowN; i++) {
                            var temp = ""; //每次截取的字符串
                            var start = i * maxLength; //开始截取的位置
                            var end = start + maxLength; //结束截取的位置
                            //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                            temp = valueDetal.substring(start, end) + "\n";
                            ret += temp; //凭借最终的字符串
                        }
                        return ret;
                    } else {
                        return valueDetal;
                    }
                }
            },
            data: goodsSkuName
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: goodsSkuSell
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option,true);


    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('color_main'));

    // 指定图表的配置项和数据
    var option1 = {
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            axisLabel: {
                interval: 0,
                textStyle: {
                    color: '#00c5d7'
                },
                formatter: function (value) {
                    // console.log(value);
                    var valueDetal = value.split("-").join("");
                    var ret = ""; //拼接加\n返回的类目项
                    var maxLength = 4; //每项显示文字个数
                    var valLength = valueDetal.length; //X轴类目项的文字个数
                    // console.log(valLength);
                    var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                    if (rowN > 1) { //如果类目项的文字大于3,
                        for (var i = 0; i < rowN; i++) {
                            var temp = ""; //每次截取的字符串
                            var start = i * maxLength; //开始截取的位置
                            var end = start + maxLength; //结束截取的位置
                            //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                            temp = valueDetal.substring(start, end) + "\n";
                            ret += temp; //凭借最终的字符串
                        }
                        return ret;
                    } else {
                        return valueDetal;
                    }
                }
            },
            data: goodsColorName
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: goodsColorSell
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option1,true);


});

</script>
</html>

